<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="app">
      <mycom></mycom>
      <mycom2></mycom2>
      <mycom3></mycom3>
      {{msg}}
      <button @click="clickBtn">vue实例中的点击</button>
    </div>
    <template id="mycom">
      <h1>hello component</h1>
    </template>
    <template id="mycom2">
      <h1>hello component2</h1>
    </template>
    <template id="mycom3">
      <div>
        <h1>{{msg}}</h1>
        <button @click="clickBtn"> vue组件中的点击</button>
      </div>
    </template>
  </body>
  <script src="vue.js"></script>
  <script>
    Vue.component('mycom', {
      template: '#mycom'
    })
    var mycom3 = {
      template: '#mycom3',
      data() {
        return {
          msg: 'hello com3'
        }
      },
      methods: {
        click() {

        }
      },
      created() {

      },
      mounted() {

      }
    }
  </script>
  <script>
    var vm = new Vue({
      el: '#app',
      components: {
        mycom2: {
          template: '#mycom2'
        },
        mycom3
      },
      data: {
        msg: 'hello vue'
      }
    })
  </script>
</html>
